<template>
  <div>
    <a-card class="card" title="周期性费用" :bordered="false">
      <a-table
        :columns="columns"
        :dataSource="loadData.skip"
        :pagination="false"
        :loading="memberLoading"
      >
        <template slot="operation" slot-scope="text, record">
          <span >
            <a @click="$refs.editModal.skip(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm title="是否要删除此行？" @confirm="remove(record.id)">
              <a>删除</a>
            </a-popconfirm>
          </span>
        </template>
      </a-table>
      <a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="$refs.createModal.skip(token(),pmsArId(),nowMg())">添加</a-button>
    </a-card>

    <!-- <a-card class="card" title="走表费用" :bordered="false">
      <a-table
        :columns="columns"
        :dataSource="loadData.go"
        :pagination="false"
        :loading="memberLoading"
      >
        <template slot="operation" slot-scope="text, record">
          <span >
            <a @click="$refs.editModal.go(record)">编辑</a>
            <a-divider type="vertical" />
            <a @click="toggle(record.key)">价格维护</a>
          </span>
        </template>
      </a-table>
      <a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="$refs.createModal.go(token(),pmsArId(),nowMg())">新增</a-button>
    </a-card> -->
    <create-form ref="createModal" :skipItem="skipItem" :goItem="goItem" @ok="getBasedate" />
    <edit-form ref="editModal" :skipItem="skipItem" :goItem="goItem" @ok="getBasedate" />
  </div>
</template>

<script>
import FooterToolBar from '@/components/FooterToolbar'
import { mixin, mixinDevice } from '@/utils/mixin'
import { getCfeeType, getFeeTyepItem, delFeeTypeItem } from '@/api/manage'
import { mapGetters } from 'vuex'
import CreateForm from './modules/CreateForm'
import EditForm from './modules/EditForm'
export default {
  name: 'FeeItem',
  mixins: [mixin, mixinDevice],
  components: {
    FooterToolBar,
    CreateForm,
    EditForm
  },
  data () {
    return {
      loading: false,
      memberLoading: false,

      // table
      columns: [
        {
          title: '类别',
          dataIndex: 'fee_items_id_text',
          key: 'fee_items_id_text',
          width: '10%',
          scopedSlots: { customRender: 'fee_items_id_text' }
        },
        {
          title: '名称',
          dataIndex: 'name',
          key: 'name',
          width: '10%',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '住宅类型',
          dataIndex: 'house_type_text',
          key: 'house_type_text',
          width: '10%',
          scopedSlots: { customRender: 'house_type' }
        },
        {
          title: '收费标准',
          dataIndex: 'standard',
          key: 'standard',
          width: '20%',
          scopedSlots: { customRender: 'standard' }
        },
        {
          title: '单位',
          dataIndex: 'unit',
          key: 'unit',
          width: '20%',
          scopedSlots: { customRender: 'unit' }
        },
        {
          title: '金额',
          dataIndex: 'price',
          key: 'price',
          width: '20%',
          scopedSlots: { customRender: 'price' }
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      loadData: {
        skip: [],
        go: []
      },

      errors: [],
      skipItem: '',
      goItem: ''
    }
  },
  created () {
    this.getBasedate()
    getFeeTyepItem({ token: this.token(), ar_id: this.pmsArId(), cm_mg_id: this.nowMg() }).then(res => {
      if (res.code == 0) {
        this.skipItem = res.data.skipItem
        this.goItem = res.data.goItem
      } else {
        this.$notification['error']({
          message: '错误',
          description: res.msg,
          duration: 4
        })
      }
    })
  },
  methods: {
    ...mapGetters(['token', 'pmsArId', 'nowMg']),
    getBasedate () {
      this.memberLoading = true
      getCfeeType({ token: this.token(), ar_id: this.pmsArId(), cm_mg_id: this.nowMg() }).then(res => {
        this.memberLoading = false
        if (res.code == 0) {
          this.loadData.skip = res.data.skip
          this.loadData.go = res.data.go
        } else {
          this.$notification['error']({
            message: '错误',
            description: res.msg,
            duration: 4
          })
        }
      })
    },
    remove (id) {
      delFeeTypeItem({ token: this.token(), ar_id: this.pmsArId(), cm_mg_id: this.nowMg(), id: id }).then(res => {
        if (res.code == 0) {
          this.getBasedate()
        } else {
          this.$notification['error']({
            message: '错误',
            description: res.msg,
            duration: 4
          })
        }
      })
    }
  }
}
</script>
